<template>  
  <view>  
    <view class="container">  

     <!-- 表单 -->  
       <view class="form">  
         <!-- 标题 -->  
         <view class="form-item">  
           <text class="label">标题</text>  
           <input class="input" v-model="form.title" placeholder="请输入标题(不超过20字)" />  
         </view>  
     
         <view class="divider"></view>  
     
         <!-- 活动地点 -->  
         <view class="form-item">  
           <text class="label">活动地点</text>  
           <input class="input" v-model="form.location" placeholder="请输入活动地点" />  
         </view>  
     
         <view class="divider"></view>  
     
         <!-- 活动日期 -->  
         <view class="form-item">  
           <text class="label">活动日期</text>  
           <picker class="picker" mode="date" @change="bindDateChange" :value="form.date">  
             <view class="picker">  
               {{ form.date }}  
             </view>  
           </picker>  
         </view>  
     
         <view class="divider"></view>  
     
         <!-- 活动时间 -->  
         <view class="form-item">  
           <text class="label">活动时间</text>  
           <picker class="picker" mode="time" @change="bindTimeChange" :value="form.time">  
             <view class="picker">  
               {{ form.time }}  
             </view>  
           </picker>  
         </view>  
     
         <view class="divider"></view>  
     
         <!-- 取消报名截止时间 -->  
         <view class="form-item">  
           <text class="label">取消报名截止时间</text>  
           <picker class="picker" mode="date" @change="bindCancelDateChange" :value="form.cancelTime">  
             <view class="picker">  
               {{ form.cancelTime }}  
             </view>  
           </picker>  
         </view>  
     
         <view class="divider"></view>  
     
         <!-- 活动描述 -->  
         <view class="form-item">  
           <text class="label">活动描述</text>  
           <textarea class="textarea" v-model="form.description" placeholder="请输入活动描述" />  
         </view>  
     
         <view class="divider"></view>  
     
         <!-- 添加图片 -->  
       <view class="form-item">  
         <text class="image-tip">添加图片（最多上传9张）</text>  
         <view class="image-list">  
           <block v-for="(image, index) in form.images" :key="index">  
             <image :src="image" class="image" @load="handleImageLoad" />  
           </block>  
           <view class="add-image" @click="chooseImage">  
             <text class="add-icon">+</text>  
           </view>  
         </view>  
       </view>
       </view>  

      <!-- 提交按钮 -->  
      <button class="submit-btn" type="primary" @click="submitForm">提交</button>  
    </view>  
  </view>  
</template>  

<script>  
export default {  
  data() {  
    return {  
      activeTab: 'publish',  
      form: {  
        title: '',  
        location: '',  
        fieldNumber: '',  
        date: '',  
        time: '',  
        cancelTime: '',  
        description: '',  
        images: [], // 初始化图片数组 
      },  
    }  
  },  
  methods: {  
	  handleImageLoad(e) {  
	      console.log('图片加载完成:', e)  
	    }  ,
    navigateTo(tab) {  
      this.activeTab = tab  
      // 根据 tab 值进行页面导航  
    },  
    bindDateChange(e) {  
      console.log('picker发送选择改变，携带值为', e.target.value)  
      this.form.date = e.target.value  
    },  
    bindTimeChange(e) {  
      console.log('picker发送选择改变，携带值为', e.target.value)  
      this.form.time = e.target.value  
    },  
    bindCancelDateChange(e) {  
      console.log('picker发送选择改变，携带值为', e.target.value)  
      this.form.cancelTime = e.target.value  
    },  
   chooseImage() {  
     uni.chooseImage({  
       count: 9, // 允许上传的最大图片数量  
       sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有  
       sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有  
       success: (res) => {  
         console.log(res)  
         this.form.images = res.tempFilePaths  
       }  
     })  
   },
    submitForm() {  
      // 表单验证通过，提交表单  
      console.log(this.form)  
    },  
  },  
}  
</script>  

<style>  
.container {  
  padding: 20rpx;  
  background-color: #f5f5f5;  
  height: 100vh;  
}  

.navbar {  
  display: flex;  
  justify-content: space-around;  
  background-color: #fff;  
  padding: 10rpx 0;  
  border-bottom: 1rpx solid #ccc;  
}  

.nav-item {  
  flex: 1;  
  text-align: center;  
  padding: 10rpx 0;  
  font-size: 28rpx;  
  color: #333;  
}  

.nav-item.active {  
  color: #007aff;  
  border-bottom: 2rpx solid #007aff;  
}  

.form {  
  background-color: #fff;  
  padding: 20rpx;  
  border-radius: 10rpx;  
  margin-top: 20rpx;  
  box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);  
}  

.form-item {  
  display: flex;  
  align-items: center;  
  margin-bottom: 20rpx;  
}  

.label {  
  font-size: 28rpx;  
  color: #333;  
  margin-right: 10rpx;  
}  

.input, .textarea, .picker {  
  flex: 1;  
  padding: 10rpx;  
  border: none;  
  border-radius: 5rpx;  
  font-size: 28rpx;  
  height: 30rpx;  
}  

.textarea {  
  height: 200rpx;  
}  

.time-picker {  
  display: flex;  
  align-items: center;  
}  

.picker {  
  flex: 1;  
  padding: 10rpx;  
  border: none;  
  border-radius: 5rpx;  
  font-size: 28rpx;  
  text-align: center;  
  height: 40rpx;  
}  

.separator {  
  margin: 0 10rpx;  
  font-size: 28rpx;  
  color: #333;  
}  

.upload-btn {  
  background-color: #007aff;  
  color: #fff;  
  padding: 10rpx 20rpx;  
  border-radius: 5rpx;  
  text-align: center;  
}  

.image-tip {  
  font-size: 28rpx;  
  color: #333;  
  margin-right: 10rpx;    
}  

.image-list {  
  display: flex;  
  flex-wrap: wrap;  
  gap: 10rpx;  
  margin-top: 10rpx;  
}  

.image {  
  width: 180rpx;  
  height: 180rpx;  
  border-radius: 10rpx;  
  object-fit: cover;  
}  

.add-image {  
  width: 180rpx;  
  height: 180rpx;  
  border: 1rpx dashed #ccc;  
  border-radius: 10rpx;  
  display: flex;  
  justify-content: center;  
  align-items: center;  
}  

.add-icon {  
  font-size: 40rpx;  
  color: #ccc;  
}  

.submit-btn {  
  width: 100%;  
  background-color: #007aff;  
  color: #fff;  
  padding: 20rpx;  
  border-radius: 10rpx;  
  text-align: center;  
  font-size: 32rpx;  
  margin-top: 20rpx;  
  box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);  
}  

.divider {  
  height: 1rpx;  
  background-color: #ccc;  
  margin: 20rpx 0;  
} 
</style>